<template>

  <div>

    <el-card>

      <el-row>
        <el-col :span="6">
          <!--返回导航-->
          <el-page-header @back="goBack" content="详情" />
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 10px">
      <el-calendar v-model="calendarDate">
        <template
          slot="dateCell"
          slot-scope="{date, data}">

          <div :class="{'cellColour': checkContain(data.day)}" class="cellDefault">
            <!--展示的日期-->
            <div>{{ data.day.split('-').slice(1).join('-') }}</div>
            <br/>
            <el-button @click="saveTaskSignDetail(data.day)" type="text" size="small"><i class="el-icon-plus"></i>添加</el-button>
            <el-button @click="delTaskSignDetail(data.day)" type="text" size="small"><i class="el-icon-delete"></i>取消</el-button>
          </div>

        </template>
      </el-calendar>
    </el-card>

  </div>

</template>

<script>

  // 局部引入
  import http from '@/utils/http'

  export default {
    name: "TaskSignDetailedList",
    components: {
    },
    data(){
      return {
        // 已有的数据
        data: [],
        // 日历绑定的时间
        calendarDate: new Date(),
        // 签到任务表ID
        taskSignId: null,
        // 签到任务主表名称
        name: null,
      }
    },
    methods: {
      /**
       * 返回上级
       */
      goBack(){
        this.$router.push('/toTaskSignList')
      },
      /**
       * 检查当前时间是否在记录时间中
       * @param time 要检查的日期
       */
      checkContain(time){
        if (time){
          for (let obj of this.data){
            if (obj.signTime === time){
              return true
            }
          }
        }
        return false
      },
      /**
       * 保存签到详情信息
       * @param time 要添加的时间
       */
      saveTaskSignDetail(time){
        http.post("/taskSign/saveTaskSignDetail", {
          signTime: time,
          taskSignId: this.taskSignId,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.getMenstruation(time)
          this.$message.success("添加成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 取消签到记录
       * @param time 签到时间，年月日
       */
      delTaskSignDetail(time){
        http.post("/taskSign/delTaskSignDetail", {
          signTime: time,
          taskSignId: this.taskSignId,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.getMenstruation(time)
          this.$message.success("取消成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 查询 上月 + 本月 + 下个月的签到情况
       * @param time 月经时间，年月日
       */
      getMenstruation(time){
        http.post("/taskSign/getMenstruation", {
          time: time,
          taskSignId: this.taskSignId,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.data = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      }
    },
    watch: {
      /**
       * 监听数据，当数据发生改变的时候，重新从后台获取最新的数据，这样就可以一直翻页渲染的时候也是有颜色的
       * 后台也没必要一次性查询出非常多的数据
       * @param val 新的值
       * @param oldVal 旧的值
       */
      calendarDate(val, oldVal){
        this.getMenstruation(val)
      }
    },
    mounted(){
      // 从路由中获取参数
      this.taskSignId = this.$route.query.taskSignId
      this.name = this.$route.query.name
      this.getMenstruation(this.calendarDate)
    },
  }
</script>

<style scoped>

  .cellColour {
    background-color: #FEE8EE;
    /*background-color: #ECFFF3;*/
    width: 100%;
    height: 100%;
  }

  .cellDefault {
    padding: 5px;
  }

</style>
